@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

h1,
h2,
h3,
h4,
h5 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

/* You can override the default Infima variables here. */
:root {
  --pk-blue: #0054ad;
  --pk-green: #51d2e3;

  --ifm-color-primary: var(--pk-blue);
  --ifm-color-primary-dark: #004c9c;
  --ifm-color-primary-darker: #004793;
  --ifm-color-primary-darkest: #003b79;
  --ifm-color-primary-light: #005cbe;
  --ifm-color-primary-lighter: #0061c7;
  --ifm-color-primary-lightest: #006de1;
  --ifm-code-font-size: 95%;
  --ifm-font-family-base: "Inter", sans-serif;
  --ifm-font-size-base: 17px;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

  --ifm-footer-background-color: transparent;
  --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 3);

  --ifm-global-radius: 0.3rem;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
  --ifm-color-primary: var(--pk-green);
  --ifm-color-primary-dark: #adfa1e;
  --ifm-color-primary-darker: #a7fa0e;
  --ifm-color-primary-darkest: #8cd504;
  --ifm-color-primary-light: #c3fc5a;
  --ifm-color-primary-lighter: #c9fc6a;
  --ifm-color-primary-lightest: #d9fd97;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] {
  --ifm-background-color: #101010;
  --ifm-background-surface-color: #101010;

  .navbar {
    border-bottom: 1px solid var(--ifm-color-emphasis-200);
  }
}

.footer {
  border-top: 1px solid var(--ifm-color-emphasis-200);

  &__bottom {
    margin-top: 4rem;
  }
}

.button--outline {
  &:focus {
    --ifm-button-background-color: var(--ifm-button-border-color);
  }

  &.button--primary:focus {
    --ifm-button-color: var(--ifm-font-color-base-inverse);
  }
}

.button__icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 0.5rem;
  position: relative;
  top: 3px;
  fill: var(--ifm-button-color);

  .button--secondary & {
    fill: var(--ifm-color-gray-900);

    [data-theme="dark"] & {
      fill: var(--ifm-font-color-base);
    }
  }

  .button--outline:hover &,
  .button--outline:active &,
  .button--outline:focus &,
  .button--outline.button--active & {
    [data-theme="dark"] & {
      fill: var(--ifm-font-color-base-inverse);
    }
  }
}

.DocSearch {
  [data-theme="light"] & {
    /* --docsearch-primary-color: var(--ifm-color-primary); */
    /* --docsearch-text-color: var(--ifm-font-color-base); */
    --docsearch-muted-color: var(--ifm-color-secondary-darkest);
    --docsearch-container-background: rgba(94, 100, 112, 0.7);
    /* Modal */
    --docsearch-modal-background: var(--ifm-color-secondary-lighter);
    /* Search box */
    --docsearch-searchbox-background: var(--ifm-color-secondary);
    --docsearch-searchbox-focus-background: var(--ifm-color-white);
    /* Hit */
    --docsearch-hit-color: var(--ifm-font-color-base);
    --docsearch-hit-active-color: var(--ifm-color-white);
    --docsearch-hit-background: var(--ifm-color-white);
    /* Footer */
    --docsearch-footer-background: var(--ifm-color-white);
  }

  [data-theme="dark"] & {
    --docsearch-text-color: var(--ifm-font-color-base);
    --docsearch-muted-color: var(--ifm-color-secondary-darkest);
    --docsearch-container-background: rgba(47, 55, 69, 0.7);
    /* Modal */
    --docsearch-modal-background: var(--ifm-background-color);
    /* Search box */
    --docsearch-searchbox-background: var(--ifm-color-emphasis-100);
    --docsearch-searchbox-focus-background: var(--ifm-color-black);
    /* Hit */
    --docsearch-hit-color: var(--ifm-font-color-base);
    --docsearch-hit-active-color: var(--ifm-color-black);
    --docsearch-hit-background: var(--ifm-color-emphasis-100);
    /* Footer */
    --docsearch-footer-background: var(--ifm-background-surface-color);
    --docsearch-key-gradient: linear-gradient(
      -26.5deg,
      var(--ifm-color-emphasis-200) 0%,
      var(--ifm-color-emphasis-100) 100%
    );
  }
}
